<template>
	<view>
		<view v-if="orders.length==0" class="padding text-grey text-center">暂无订单</view>
		<view v-else class="bg-white margin-top" v-for="(item,index) in orders" :key="item.orderno">
			<view class="flex justify-between align-center padding solid-bottom">
				<text>{{item.createTime}}</text>
				<text class="text-gray">{{$orderStatus(item.status)}}</text>
			</view>
			<view @tap="clickDetailFun(item.orderno)">
				<scroll-view scroll-x="" style="padding: 10px;" v-if="item.details.length>=3">
					<image style="width: 60px;height: 60px;object-fit: cover;margin-right: 10px;" mode="aspectFill" :src="subitem.img"  v-for="(subitem,subindex) in item.details" :key="subitem.skuId"></image>
				</scroll-view>
				<view class="padding solid-bottom flex align-center" style="width: 100%;" v-else v-for="(subitem,subindex) in item.details" :key="subitem.skuId">
					<view><image style="width: 50px !important;height: 50px;object-fit: cover;" mode="aspectFill" :src="subitem.img"></image></view>
					<view class="padding-left">
						<view style="overflow: hidden;text-overflow: ellipsis;display: block;">{{subitem.name}}</view>
						<view class="text-sm text-gray padding-top-xs padding-bottom-xs">已选：{{subitem.attrName}}</view>
						<view class="flex justify-between text-gray text-sm">
							<text>数量 ：{{subitem.num}}</text>
							<text style="color: #C5A16F;">￥{{subitem.price}}</text>
						</view>
					</view>
				</view>
				<view class="solid-top solid-bottom padding" style="width: 100%;display: flex;justify-content: flex-end;">
					<text>共{{item.pcount}}件商品，实付</text>
					<text>￥{{item.priceReal}}</text>
				</view>
			</view>
			<view class="flex justify-end padding" v-if="$orderStatus(item.status)=='待支付' || $orderStatus(item.status)=='待评价' || $orderStatus(item.status)=='已发货'">
				<view @tap="clickCancle(item,index)" class="cu-tag round bg-white line-gray margin-right" v-if="$orderStatus(item.status)=='待支付'">取消订单</view> 
				<view @tap="clickPay(item)" class="cu-tag round bg-white line-brown" v-if="$orderStatus(item.status)=='待支付'">去付款</view>
				<view @tap="clickComment(item.orderno)" class="cu-tag round bg-white line-brown" v-if="$orderStatus(item.status)=='待评价'">去评价</view>
				<view @tap="clickReceive(item,index)" class="cu-tag round bg-white line-brown" v-if="$orderStatus(item.status)=='已发货'">确认收货</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			orders:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		methods:{ 
			clickDetailFun(orderno){
				this.$jump('/pages/order/detail?orderno='+orderno)
			},
			clickComment(orderno) {
				this.$jump('/pages/order/commentskus?orderno='+orderno)
			},clickPay(item) {
				uni.navigateTo({
					url: '/pages/order/casher?orderno=' + item.orderno + '&price=' + item.priceReal + '&num=' + item.pcount
				})
			},clickCancle(item,index) {
				var that = this;
				uni.showModal({
					content:'确认取消该订单？',
					success(e)  {
						if(e.confirm) {
							that.$get('mall/order/cancle', {
								orderno: item.orderno
							},'post',true).then((res) => {
								if (res.data) {
									item.status = 11;//取消
									that.$set(that.orders,index,item)
								}
							})
						}
					}
				})
				
			},clickReceive(item,index) {
				var that = this;
				uni.showModal({
					content:'确认已收货？',
					success(e)  {
						if(e.confirm) {
							that.$get('mall/order/receive', {
								orderno: item.orderno
							},'post',true).then((res) => {
								if (res.data) {
									item.status = 40;//已收货
									that.$set(that.orders,index,item)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style></style>
